<template>
    <div class="headtop">
        <div class="headbody">
            <div>
                <van-image width="6rem" height="6rem" fit="cover" radius="1.2rem" :src="user.avatar_url" />
            </div>
            <div>
                <p class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-light text-shadow-lg">{{
                    proxy.$user.value.username }}</p>
                <p class="text-light/80 text-lg text-shadow-lg">账号：{{ proxy.$user.value.email }}</p>
            </div>
        </div>
    </div>
    <van-cell-group inset class="item-input">
        <van-field v-model="email" center readonly clearable label="绑定邮箱:" class="id-input">
            <template #button>
                <van-button size="small" type="primary" class="unbind-btn" @click="ChangeEmail">
                    解&nbsp;&nbsp;绑
                </van-button>
            </template>
        </van-field>
    </van-cell-group>

    <van-cell-group inset class="item-input">
        <van-field v-model="qq" center required label="绑定QQ" placeholder="待完善" class="id-input" />
    </van-cell-group>

    <van-cell-group inset class="item-input">
        <van-field v-model="mobile" center required label="绑定手机号" placeholder="待完善" class="id-input" />
    </van-cell-group>

    <p class="p1">温馨提示：完善后可直接用QQ或手机号进行登录</p>


    <van-button class="unbind-btn" @click="Save"
        style="color: aliceblue;border-radius:0.8rem;margin: 1.5rem auto;display: block;width: 90%;font-size: 1rem;">
        保&nbsp;&nbsp;存
    </van-button>

    <router-link to="/user">
        <van-button class="unbind-btn"
            style="color: aliceblue;border-radius:0.8rem;margin: 1.5rem auto;display: block;width: 90%;font-size: 1rem;">
            返&nbsp;&nbsp;回
        </van-button>
    </router-link>

    <!-- 弹出层确认密码 -->
    <van-popup v-model:show="show" round :style="{ padding: '34px' }" @close="PopupClose"
        style="top: 18rem;background-color:rgba(25, 25, 25);">
        <van-cell-group inset class="item-input">
            <van-field v-model="paasword" center type="password" required placeholder="请输入密码" class="id-input" />
        </van-cell-group>
        <van-button class="unbind-btn" @click="Sub"
            style="color: aliceblue;border-radius:0.8rem;margin: 1.5rem auto;display: block;width: 90%;font-size: 1rem;">
            确&nbsp;&nbsp;认
        </van-button>
    </van-popup>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue';

const { proxy } = getCurrentInstance();
const user = proxy?.$user?.value || {};
const email = ref(user.email || '未绑定邮箱');
const qq = ref();
const mobile = ref();
const show = ref(); // 控制弹层
const paasword = ref();
show.value = false;
qq.value = user.qq;
mobile.value = user.mobile;

// 保存按钮点击事件,验证信息,弹出确认密码层
const Save = () => {
    //手机正则
    const mobileReg = /^1[3-9]\d{9}$/;
    //qq号正则
    const qqReg = /^[1-9][0-9]{4,10}$/;

    if (!mobile.value && !qq.value) {
        proxy.$toast('请至少绑定一个账号');
        return;
    }

    if (mobile.value && mobileReg.test(mobile.value) === false) {
        proxy.$toast('请输入正确的手机号');
        return;
    }

    if (qq.value && qqReg.test(qq.value) === false) {
        proxy.$toast('请输入正确的QQ号');
        return;
    }

    console.log('保存信息');

    show.value = true;
}

// 确认密码
const Sub = async () => {
    if (!paasword.value) {
        proxy.$toast('请输入密码');
        return;
    }
    const data = {
        id: user.id,
        password: paasword.value,
        qq: qq.value,
        mobile: mobile.value,
    }

    const res = await proxy.$http.post({
        url: '/user/editid',
        params: data,
    })

    if (res.code == 1) {
        proxy.$success('保存成功');
        setTimeout(() => {
            proxy.$router.push('/user');
        }, 1000);
    } else {
        proxy.$fail(res.msg);
    }
}

// 解绑邮箱
const ChangeEmail = () => {
    proxy.$confirm({
        title: '您确定要更换邮箱吗？',
        message: '确认后将为您跳转至邮箱验证页面',
    })
        .then(() => {
            proxy.$router.push('/user/emailedit')
        })
        .catch(() => {
            proxy.$toast('已取消');
        });
}

//弹层关闭
const PopupClose = () => {
    proxy.$toast('已取消');
}
</script>

<style scoped>
/* 解决滚动条问题：重置页面默认边距 */
::v-deep body {
    margin: 0;
    padding-bottom: 1rem;
}

.item-input {
    /* 将cqb替换为rem单位，避免布局异常 */
    margin-top: 2rem;
    border-radius: 0.75rem;
    /* 移除固定高度，让内容自然撑开 */
}

.unbind-btn {
    background: linear-gradient(-45deg,
            rgba(190, 27, 27, 0.6),
            rgba(41, 189, 203, 0.7),
            rgba(53, 113, 196, 0.8),
            rgba(195, 40, 169, 0.7),
            rgba(202, 32, 88, 0.6));
    background-size: 300% 300%;
    animation: fluidGradient 8s ease infinite;
    transition: all 0.5s ease;
}

.id-input {
    font-size: 1rem;
    border-radius: 0.75rem;
    background: linear-gradient(-45deg,
            rgba(53, 167, 118, 0.6),
            rgba(83, 154, 160, 0.7),
            rgba(63, 104, 161, 0.8),
            rgba(134, 58, 158, 0.7),
            rgba(202, 69, 118, 0.6));
    background-size: 300% 300%;
    animation: fluidGradient 8s ease infinite;
    transition: all 0.5s ease;
}

.id-input:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@keyframes fluidGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.p1 {
    text-indent: 1rem;
    margin: 1.5rem 0;
    background: linear-gradient(90deg,
            rgba(209, 64, 64, 0.8),
            rgba(117, 250, 255, 0.9),
            rgba(255, 77, 181, 0.8));
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 4px rgba(255, 77, 181, 0.2);
    animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
        text-shadow: 0 2px 4px rgb(250, 71, 71);
    }

    50% {
        background-position: 100% center;
        text-shadow: 0 3px 6px rgb(93, 188, 243);
    }

    100% {
        background-position: 0% center;
        text-shadow: 0 2px 4px rgba(244, 70, 171, 0.2);
    }
}

.headtop {
    width: 100%;
    height: 10rem;
    background-color: rgb(25, 25, 25);
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 处理bug */
    margin-bottom: 0.5rem;
}

.headbody {
    display: flex;
    width: 100%;
    height: 6rem;
    margin-top: 1.5rem;
}

.headbody div {
    margin-left: 0.5rem;
}

.headbody p:nth-child(1) {
    font-size: 1.5rem;
    line-height: 3rem;
    /* 缩进 */
    text-indent: 0.8rem;
    /* 字间距 */
    letter-spacing: 0.1rem;
    color: white;
}

.headbody p:nth-child(2) {
    font-size: 1rem;
    line-height: 3rem;
    text-indent: 0.8rem;
    color: aliceblue;
}
</style>
